<template>
  <div v-if="show" class="dialog-mask">
    <div class="dialog-box">
      <div class="title-box">
        <div class="title">
          <category-title title="告警推送" title-sub="Alarm push"/>
        </div>
        <div class="close-icon" @click="$emit('close')">
          <close-outlined/>
        </div>
      </div>
      <div class="form">
        <div class="tt1">
          事件编码
        </div>
        <div class="tf1">
          {{ props.data.name }}
        </div>
        <div class="tt2">
          告警类型
        </div>
        <div class="tf2">
          <span class="tag fill-red">
            {{ ["", "天台逗留", "晚归", "上网行为", "失联", "异常人员"][props.data.type] }}
          </span>
        </div>
        <div class="tt3">
          操作人员
        </div>
        <div class="tf3">
          ---
        </div>
        <div class="tt4">
          操作时间
        </div>
        <div class="tf4">
          {{ date }}
        </div>
        <div class="tt5">
          接收对象
        </div>
        <div class="tf5">
          <a-select
              v-model:value="state.value"
              :filter-option="false"
              :not-found-content="state.fetching ? undefined : null"
              :options="state.data"
              label-in-value
              mode="multiple"
              placeholder="接受对象"
              style="width: 400px"
              @search="fetchUser"
          >
            <template v-if="state.fetching" #notFoundContent>
              <a-spin size="small"/>
            </template>
          </a-select>
        </div>
        <div class="tt6"/>
        <div class="tf6">
          <div class="btn-cancel" @click="$emit('close')">
            取 消
          </div>
          <div class="btn-confirm" @click="submit">
            确 认
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import {CloseOutlined} from "@ant-design/icons-vue";

import CategoryTitle from "../category-title/index.vue";
import {onMounted} from "@vue/runtime-core";
import {dateTransform} from "@/common/tool";
import {SecurityR1} from "@/common/customs/security";
import {reactive} from "@vue/reactivity";
import {debounce} from "lodash-es";

const date = ref("");
const selectedReceiver = ref();
const selection = ref([]);
const state = reactive({
  data: [],
  value: [],
  fetching: false,
});
// eslint-disable-next-line no-undef
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => {
    }
  }
});

const getTeacher = async () => {
  const api = new SecurityR1();
  api.params({
    page: 1,
    page_size: 100,
    type: 1
  });
  await api.send();
  const {data} = await api.getDatas();
  state.data = data.data.map(i => {
    return {
      label: i.XM,
      value: i.JGH,
    };
  });
};
watch(() => props.show, () => {
  if (props.show) {
    date.value = `${dateTransform().date} ${dateTransform().time}`;
  }
});
// eslint-disable-next-line no-undef
const emit = defineEmits(["submit", "close"]);

const submit = () => {
  if (state.value.length) {
    emit("submit", {
      array: [...state.value.map(i=>i.value)],
      gj_id: props.data.id,
      czy: 1
    });
    state.value = []
  }
};
onMounted(() => {
  getTeacher();
});
let lastFetchId = 0;
const fetchUser = debounce(async (value) => {
  console.log("fetching user", value);
  lastFetchId += 1;
  const fetchId = lastFetchId;
  state.data = [];
  state.fetching = true;
  const api = new SecurityR1();
  api.params({
    page: 1,
    page_size: 100,
    type: 1,
    name: value,
  });
  await api.send();
  const {data} = await api.getDatas();
  if (fetchId !== lastFetchId) {
    // for fetch callback order
    return;
  }
  state.data = data.data.map(i => {
    return {
      label: i.XM,
      value: i.JGH,
    };
  });
  state.fetching = false;
}, 300);
watch(state.value, () => {
  state.data = [];
  state.fetching = false;
});

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
